<template>
  <div class="video-container">
    <video
        ref="video"
        controls
        :width="videoWidth"
        :height="videoHeight"
        @loadeddata="handleLoadedData"
        @timeupdate="updateProgress"
    >
      <source :src="videoUrl" type="video/mp4" />
      您的浏览器不支持视频标签。
    </video>
    <div class="controls">
      <button @click="togglePlayPause">
        {{ isPlaying ? '暂停' : '播放' }}
      </button>
      <div class="progress-bar" @click="seek">
        <div class="progress" :style="{ width: progress + '%' }"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: 'https://cesium.com/public/SandcastleSampleData/big-buck-bunny_trailer.mp4',
      videoWidth: 640,
      videoHeight: 360,
      isFullScreen: false,
      playbackRate: 1,
      progress: 0,
    };
  },
  methods: {
    /**
     * loadedmetadata: 事件在元数据（metadata）被加载完成后触发
     * loadeddata: 事件在媒体当前播放位置的视频帧（通常是第一帧）加载完成后触发。
     * canplay: 事件在终端可以播放媒体文件时（但估计还没有加载足够的数据来播放媒体直到其结束，即后续可能需要停止以进一步缓冲内容）被触发。
     * canplaythrough: 事件在终端可以播放媒体文件时（估计已经加载了足够的数据来播放媒体直到其结束，而不必停止以进一步缓冲内容）被触发。
     * 事件先后顺序是:loadedmetadata -> loadeddata -> canplay -> canplaythrough
     */

    /**
     * @handleLoadedData
     * 事件在媒体当前播放位置的视频帧（通常是第一帧）加载完成后触发
     */
     handleLoadedData(){

     },
    /**
     * @timeupdate
     * 用于在视频播放过程中更新进度条,确保进度条与视频播放的当前位置同步
     */
    updateProgress(){
      const videos = this.$refs.video;
      this.progress = (videos.currentTime / videos.duration) * 100;
    },
    /**
     * 控制进度条
     * @param event
     */
    seek(event) {
      const videos = this.$refs.video;
      const rect = event.target.getBoundingClientRect();
      const offsetX = event.clientX - rect.left;
      const width = rect.width;
      videos.currentTime = (offsetX / width) * videos.duration;
    },
    togglePlayPause() {
      const videos = this.$refs.video;
      if (videos.paused) {
        videos.play();
        this.isPlaying = true;
      } else {
        videos.pause();
        this.isPlaying = false;
      }
    },
  },
};
</script>

<style scoped>
.video-container {
  position: relative;
  width: 640px;
  margin: auto;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #000;
  color: #fff;
}

.progress-bar {
  position: relative;
  width: 80%;
  height: 5px;
  background-color: #444;
  cursor: pointer;
}

.progress {
  height: 100%;
  background-color: #ff0000;
}
</style>
